/*
 * @Author: quit
 * @Date: 2023-02-24 10:01:11
 * @LastEditTime: 2023-02-24 10:32:35
 * @Descripttion:
 * React事件绑定与原生DOM绑定事件基本一致
 * on + 事件名称 = { 事件处理执行体 }
 * onClick = {() => {}}
 * @notice:
 * 事件采用驼峰命名法
 * 在类组件中通常使用this 获取内部方法
 * 函数组件则直接将方法写在函数组件中直接使用
 *
 * 事件对象可以通过事件处理函数的参数获取到事件对象
 * 在React中的事件对象叫做 合成事件(合成对象) , 兼容所有浏览器,无需进行浏览器兼容性处理
 */

import React from 'react'

class eventComponent extends React.Component {
    handleClick(e) {
        console.log('点击了按钮')
        console.log('事件对象', e)
    }
    HandleToLink(e) {
        e.preventDefault()
        console.log(e)
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}> 按钮 </button>
                <a href="www.baidu.com" onClick={this.HandleToLink}>
                    to Tiktok
                </a>
            </div>
        )
    }
}

// function eventComponent() {
//     function handleClick() {
//         console.log('点击了按钮')
//     }
//     return (
//         <div>
//             <button onClick={handleClick}> 按钮 </button>
//         </div>
//     )
// }

export default eventComponent
